var Lightbox = {
  _tintScreen: null
};

Lightbox.show = function(html) {
  if (!(Lightbox._tintScreen)) {
    Lightbox._tintScreen = $('<div>').addClass('lightbox-tintscreen').appendTo(document.body);
    Lightbox._tintScreen.click(Lightbox.hide);
  }
  Lightbox._tintScreen.show();
  
  var elmt = $('<div>')
    .addClass('lightbox-container')
    .html(html)
    .appendTo(document.body);
  
  var footer = $('<div>')
    .addClass('lightbox-footer')
    .appendTo(elmt);
  $('<button>')
    .text('Close')
    .click(Lightbox.hide)
    .appendTo(footer);
  
  var left = Math.round((Lightbox._tintScreen.width() - elmt.outerWidth()) / 2);
  var top = Math.round((Lightbox._tintScreen.height() - elmt.outerHeight()) * 0.3);
  elmt.css('left', left + 'px').css('top', top + 'px');
  
  return elmt;
};

Lightbox.hide = function() {
  $('.lightbox-container').hide().remove();
  Lightbox._tintScreen.hide();
};
